import * as LucideIcon from "lucide-react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useEffect, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router";
import type { IPermission } from "~/api/login/type";
import SideMenu from "~/components/side-menu";
import { useUserInfo } from "~/contexts/user-info";
import type { IMenuItem } from "~/types/manage";

// 递归转换函数
function transformPermissionToMenuItem(
  permissions: IPermission[],
): IMenuItem[] {
  return permissions
    .filter((item) => item.show)
    .map((permission) => ({
      label: permission.name,
      path: permission.path,
      icon: permission.icon
        ? LucideIcon[permission.icon as keyof typeof LucideIcon]
        : undefined,
      children: permission.children
        ? transformPermissionToMenuItem(permission.children)
        : undefined,
    }));
}

export default function Layout() {
  const navigate = useNavigate();
  const location = useLocation();
  const { userInfo } = useUserInfo();
  const [menuList, setMenuList] = useState<IMenuItem[]>([]);
  const [collapsed, setCollapsed] = useState(true); // 添加折叠状态

  useEffect(() => {
    if (!userInfo) {
      return;
    }
    const tempMenuList = transformPermissionToMenuItem(
      userInfo?.permissions.find(
        (item) => item.path === location.pathname.split("/")?.[1],
      )?.children || [],
    );
    setMenuList(tempMenuList);
  }, [userInfo]);

  return (
    <div className="flex">
      <SideMenu
        menuHeader={
          collapsed ? (
            <div
              className="cursor-default py-4 text-3xl"
              style={{
                textShadow: "0px 0px 5px #000",
              }}
              onClick={() => {
                navigate("/manage");
              }}
            >
              FW
            </div>
          ) : (
            <div
              className="cursor-default py-4 text-3xl"
              style={{
                textShadow: "0px 0px 5px #000",
              }}
              onClick={() => {
                navigate("/manage");
              }}
            >
              FreeWord
            </div>
          )
        }
        menuList={menuList}
        collapsed={collapsed}
      />
      <div className="flex h-screen flex-1 flex-col gap-4 overflow-hidden bg-gray-200 p-4">
        <div className="flex gap-4">
          {/* 添加折叠按钮在侧边栏和主内容之间 */}
          <button
            onClick={() => setCollapsed(!collapsed)}
            className="my-auto flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md transition-colors hover:bg-gray-100"
          >
            {collapsed ? <ChevronRight /> : <ChevronLeft />}
          </button>
          <div className="flex flex-1 items-center rounded-xl bg-white px-4 py-2">
            {"/."}
          </div>
        </div>

        <div className="flex flex-1 flex-col overflow-hidden rounded-xl bg-white p-4">
          <Outlet />
        </div>
      </div>
    </div>
  );
}
